﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>箭头函数</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <h1>箭头函数</h1><br/>

    <div id="app">
        {{name}}
        <p>arrow fn不具备this,arguments</p>
        <p>自己家没this就找上一级的this</p>
        <p>如何更改this指向？</p>
        <ul>
            <li>call apply bind</li>
            <li>var that = this;</li>
            <li>=></li>
        </ul>
        <p>如何确定this是谁?</p>
        <p>看谁调用的 .前面的是谁，那么this就是指向它</p>
        <p>
            传统写法:<br/>
            function a(b){<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;return b+1;<br/>
            }
        </p>
        <p>
            箭头函数:<br/>
            let a = b => {return b+1;}//去掉function关键字参数有一个可以省略小括号   小括号和大括号之间有一个箭头如果没有大括号则可以直接是返回值，有大括号需写return如下是等价<br/>
            let a = b => b+1;
        </p>
        <p style="color: red; font-weight: bold;">
            把如下回调函数改成箭头函数<br/>
            function a(b) {<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;return function b(c){<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return b+c;<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;}<br/>
            }<br/>
            改完以后的结果<br/>
            let a = b => c => b+c;<br/>
            console.log(a(1)(2));//3
        </p>
    </div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据'
        },
        mounted(){

        }
    });
</script>

</body>
</html>